<template>
  <div>
    <el-select
      filterable
      v-model="value"
      multiple
      @change="handleChange"
      class="mb20 mr20"
      style="width: 43%"
    >
      <el-option
        v-for="(item,index) in selectData"
        :key="index"
        :label="item.title"
        :value="item.key"
      />
    </el-select>
    <el-checkbox v-model="checkAll" class="mr10" v-if="targetMode === 1" @change="checkChange">考评全部</el-checkbox>
    <el-tooltip
      class="item"
      effect="light"
      content="下拉选择部门后，穿梭框左侧展示该部门下的相应人员，勾选点击按钮到右侧，点击下一步。"
      placement="top"
    >
      <i class="fs16 el-icon-warning-outline"></i>
    </el-tooltip>
    <x-transfer
      @postData="handlePostdData"
      :titles="titles"
      :from="fromData"
      :to="toData"
      class="mt20"
      ref="xTransfer"
    />
  </div>
</template>

<script>
import { getEvalAll, allDept } from '@/api/eval'
import { getDeptTree } from '@/api/department'
import { getDeptUserTree, getDeptPositionTree } from '@/api/eval'
import XTransfer from '@/components/XTransfer'

export default {
  components: {
    XTransfer
  },
  data() {
    return {
      fromData: [],
      toData: [],
      selectData: [],
      value: null,
      saveArr: [],
      titles: [],
      targetMode: null,
      checkAll: false
    }
  },
  watch: {
    targetMode: {
      handler(n, o) {
        // 复制新增的情况，刚进来是不清空的，即判断 old 是否有值
        // old 有值，new 有值，即表示存在第二次切换，则清空
        if (n !== o && o) {
          this.fromData = []
          this.toData = []
          this.value = []
        }
      }
    }
  },
  methods: {
    checkChange(e) {
      // console.log('check e', e)
      if (e) {
        allDept().then(res => {
          console.log('dept res', res)
          const arr = res.data
          arr.map(v => {
            v.key = v.deptId
            v.label = v.deptName
          })
          this.fromData = [...arr]
        })
      } else {
        this.fromData = []
      }
    },
    handlePostdData(arr) {
      this.toData = [...arr]
    },
    setArr(arr) {
      if (arr.length > 0) {
        arr.map(v => {
          v.key = v.targetId
          v.label = v.name
        })
        this.toData = [...arr]
      }
    },
    getData(n) {
      this.targetMode = n
      if (n === 1) {
        this.getDeptTree()
        this.titles = ['待选考评部门', '已选考评部门']
      } else if (n === 3) {
        this.getDeptUser()
        this.titles = ['待选考评对象', '已选考评对象']
      } else {
        this.getDeptPosition()
      }
    },
    async getDeptTree() {
      const res = await getDeptTree()
      const arr = res.data
      this.selectData = arr
    },
    async getDeptPosition() {
      const res = await getDeptPositionTree()
      this.selectData = res.data
    },
    async getDeptUser() {
      const res = await getDeptUserTree()
      this.selectData = res.data
    },
    handleChange(val) {
      if (this.checkAll) {
        this.checkAll = false
      }
      let arr = []
      this.selectData.map(v => {
        val.map(j => {
          if (j === 'all') {
            return false
          } else {
            if (v.key === j) {
              if (v.children.length > 0) {
                arr = [...arr, ...v.children]
              } else {
                arr.push(v)
              }
            }
          }
        })
      })

      arr.map(v => {
        v.label = v.title
      })
      this.$nextTick(() => {
        this.saveArr = arr
        this.fromData = arr
      })
    },
    postData() {
      this.$refs.xTransfer.postToData()
      if (this.toData.length > 0) {
        let arr = []
        this.toData.map(j => {
          arr.push({ key: j.key })
        })
        arr.map(v => {
          v.targetMode = this.targetMode
          v.targetId = v.key
        })
        // console.log('fourth', arr)
        this.$emit('postData', true, arr, 4)
        return false
      } else {
        this.$message.error('请至少选择一条')
        this.$emit('notSubmit', 4)
      }
    }
  }
}
</script>
